<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画操作</title>
		<!-- 动画操作   针对页面弹出效果
		     show()    功能：显示效果   本质：display:block
			 hide()    功能：隐藏效果   本质：display:none
			 
			 slideDown()  功能：（滑动式）向下效果
			 slideUp()    功能：（滑动式）向上效果
			 
			 fadeIn(毫秒数)     功能：淡入效果
			 fadeOut(毫秒数)    功能：淡出效果
			 
			 hover()      功能：悬停切换效果
		 -->
	</head>
	<style>
			div{
				width: 200px;
				height: 200px;
				background-color: #55aaff;
				display: none;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button id="show">显示效果</button>
		<button id="hide">隐藏效果</button>
		<button id="slideDown">(滑动式)向下效果</button>
		<button id="slideUp">(滑动式)向上效果</button>
		<button id="fadeIn">淡入效果</button>
		<button id="fadeOut">淡出效果</button>
		<div></div>
		<script>
			// 1.显示和隐藏效果
			$("#show").click(function(){
				$("div").show();
			});
			$("#hide").click(function(){
				$("div").hide();
			});
			// 2.(滑动效果)向下效果和向上效果
			$("#slideDown").click(function(){
				$("div").slideDown();
			});
			$("#slideUp").click(function(){
				$("div").slideUp();
			});
			// 3.淡入和淡出
			$("#fadeIn").click(function(){
				$("div").fadeIn(4000);
			});
			$("#fadeOut").click(function(){
				$("div").fadeOut(4000);
			});
			//  tab选项卡
		</script>
	</body>
</html>